<template>  
    <view> 
		<view class="top-Fixed" :style="{visibility: isScrollHidden,height:strbar}" >
			<view aria-role="button" aria-label="扫一扫二维码" class="x-item" style="margin-left: 30upx;" :style="{top:itembar}" @click="scanCode">
				<image class="x-item_img" :src="top_list[0].props"></image>
			</view>
			<view aria-role="button" aria-label="政策中心" class="x-item" style="margin-left: 70upx;" :style="{top:itembar}" @click="naviageToPage(top_list[1].muri)">
				<image class="x-item_img" :src="top_list[1].props"></image>
			</view>
			<view aria-role="button" aria-label="关爱码" class="x-item" style="margin-left: 70upx;" :style="{top:itembar}" @click="naviageToPage(top_list[2].muri)">
				<image class="x-item_img" :src="top_list[2].props"></image>
			</view>
		</view>
		<view class="user-section" :style="{visibility: isScrollShow}">
			<!-- 暂未开发保留搜索功能 -->
			<view class="cu-bar search">
				<view class="action text-white" :style="{marginTop:sebar}">
					<text style="display: block;height: 60rpx;"></text>
					<!-- <text class="cuIcon-search" style="font-size: 48rpx; margin-left: 0em; margin-right: 0em;"></text> -->
				</view>
			</view>
			<view class="cate-section grid col-3 margin-top no-border" style="height:150rpx;">
				<view aria-role="button" aria-label="扫一扫二维码" class="cate-item" @click="scanCode">
					<image class="cu-avatar" :src="top_list[0].props"></image>
					<text class="iconTxt-top">扫一扫</text>
				</view>
				<view aria-role="button" class="cate-item" @click="naviageToPage(top_list[1].muri)">
					<image class="cu-avatar" :src="top_list[1].props"></image>
					<text class="iconTxt-top">政策中心</text>
				</view>
				<view aria-role="button" class="cate-item" @click="naviageToPage(top_list[2].muri)">
					<image class="cu-avatar" :src="top_list[2].props"></image>
					<text class="iconTxt-top">关爱码</text>
				</view>
			</view>
		</view>
		<!-- 上部政务应用mis部分 naviageToPage(item.muri)-->
		<view class="cate-section grid col-5 no-border margin-top">
			<view aria-role="button" v-for="(item, index) in mis_list" :key="index" @click="naviageToPage(item.muri)" class="cate-item">
				<view class="cu-item" v-if="item.ptype == 'ICO'" style="width:70rpx;height:70rpx;margin-bottom:14rpx;">
					<text :style="item.pscss" style="font-size:70rpx" :class="item.props"></text>
				</view>
				<image v-else :src="item.props" :style="item.pscss"></image>
				<text>{{item.name}}</text>
			</view>
			<view aria-role="button" aria-label="更多应用" @click="pageGo('/pages/admin/vserv?all')" class="cate-item">
				<text style="font-size:70rpx" class="cuIcon iconfont icon-gengduo text-grey"></text>
				<text>更多</text>
			</view>
		</view>
		<view class="parting"></view>
		<!-- 中间消息通知msg部分 -->
		<view class="cu-card" :class="isCard?'no-card':''">
			<view class="cu-item shadow" style="height: 77px;" @click="pageGo('/pages/admin/vserv?news')">
				<view class="cu-list menu-avatar">
					<view class="cu-item" style="padding-right: 0;">
						<view aria-hidden="true" class="cu-avatar round lg">
							<image :src="require('@/static/tz.png')" mode="widthFix"></image>
						</view>
						<view class="arrow content flex-sub">
							<view class="text-cut flex" v-for="(item,idx) in msg_list" :key="idx" >
								<view class="text-sm justify-end ellipsis" style="width: 72%;"><text aria-hidden="true" class="iconfont icon-dian text-red" style="float: left;margin-top: -2rpx;font-size: 48rpx;"></text>{{item.title}}</view>
								<view class="text-gray text-sm flex" style="margin-left: auto;">
									<view aria-hidden="true" class="text-cut">
										<text class="text-gray margin-right" style="padding-left: 10rpx;">{{resolvingDate(item.ptime)}}</text>
									</view>
								</view>
							</view>
						</view>
						<view aria-hidden='true'>
							<text class="cuIcon-title text-red text-sm"></text>
							<text class="cuIcon-right text-gray"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="parting"></view>
		<!-- 中间广告ads部分 -->
		<swiper class="screen-swiper" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in ads_list" :key="index"  @click="naviage(item.link)">
				<video :src="item.image" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.itype=='video'"></video>
				<image :aria-label="item.title" :src="item.image" mode="aspectFill" v-else ></image>
			</swiper-item>
		</swiper>
		<view class="parting"></view>
		<!-- 底部生活服务wit部分 naviageToPage(item.muri)-->
		<view class="action" aria-role="heading" aria-label="阳光雨露标题">
			<text aria-hidden="true" class="cuIcon-titles main_color"></text>阳光雨露
			<text aria-hidden="true" class="fr text-sm margin-right margin-top-xs text-fw">一键服务 | 民生直达</text>
		</view>
		<view class="grid col-3" style="margin: 0 24rpx;padding-bottom: 20rpx;">
			<view aria-role="button" :aria-label="wit_list[0].name" @click="naviageToPage(wit_list[0].muri)">
				<image aria-hidden="true" style="height: 360rpx; width: 218rpx;" :src="wit_list[0].props"></image>
			</view>
			<view class="grid col-1" style="width: 66%;">
				<view aria-role="button" :aria-label="wit_list[1].name" @click="naviageToPage(wit_list[1].muri)">
					<image aria-hidden="true" style="height: 176rpx;" :src="wit_list[1].props" mode="aspectFill"></image>
				</view>
				<view class="grid col-2">
					<view aria-role="button" :aria-label="wit_list[2].name" @click="naviageToPage(wit_list[2].muri)">
						<image aria-hidden="true" style="height: 176rpx;width: 222rpx;margin-top: 10rpx;" :src="wit_list[2].props" mode="aspectFill"></image>
					</view>
					<view aria-role="button" :aria-label="wit_list[3].name" @click="naviageToPage(wit_list[3].muri)">
						<image aria-hidden="true" style="height: 176rpx;width: 222rpx;margin: 10rpx 0 0 6rpx;" :src="wit_list[3].props" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="parting"></view>
		<view class="action" aria-role="heading" aria-label="康复驿站标题">
			<text aria-hidden="true" class="cuIcon-titles main_color"></text>康复驿站
			<text aria-hidden="true" class="fr text-sm margin-right margin-top-xs text-fw">社会化康复辅具供应资源</text>
		</view>
		<view class="cu-card article" style="height: 390rpx;">
			<view class="cu-item shadow">
				<view class="content" style="padding: 0;">
					<view style="width: 340rpx; height: 362rpx;" aria-role="button" :aria-label="wit_list[4].name">
						<image aria-hidden="true" style="width: 320rpx; height: 360rpx;" :src="wit_list[4].props" @click="naviageToPage(wit_list[4].muri)"></image>
					</view>
					<view class="desc">
						<view aria-role="button" :aria-label="wit_list[5].name">
							<image aria-hidden="true" @click="naviage(wit_list[5].muri)" class="img-sq" :src="wit_list[5].props"></image>
						</view>
						<view aria-role="button" :aria-label="wit_list[6].name">
							<image aria-hidden="true" @click="naviageToPage(wit_list[6].muri)" class="img-sq" :src="wit_list[6].props"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="parting"></view>
		<view aria-role="heading" aria-label="自强园地标题" class="action">
			<text aria-hidden="true" class="cuIcon-titles main_color"></text>自强园地
			<text aria-hidden="true" class="fr text-sm margin-right margin-top-xs text-fw" >自强自立 | 改变生活</text>
		</view>
		<view style="height: 250rpx;">
			<view class="grid margin-top col-3 " style="margin-left: 24rpx;margin-right: 4rpx;">
				<view aria-role="button" :aria-label="wit_list[7].name" class="cate-item" @click="naviageToPage(wit_list[7].muri)">
					<image aria-hidden="true" class="zq-img" :src="wit_list[7].props"></image>
				</view>
				<view aria-role="button" :aria-label="wit_list[8].name" class="cate-item" @click="naviageToPage(wit_list[8].muri)">
					<image aria-hidden="true" class="zq-img" :src="wit_list[8].props"></image>
				</view>
				<view aria-role="button" :aria-label="wit_list[9].name" class="cate-item" @click="naviageToPage(wit_list[9].muri)">
					<image aria-hidden="true" class="zq-img" :src="wit_list[9].props"></image>
				</view>
			</view>
		</view>
		<view class="parting"></view>
		<view aria-role="heading" aria-label="有爱无碍标题" class="action">
			<text  aria-hidden="true" class="cuIcon-titles main_color"></text>有爱无碍
			<text  aria-hidden="true" class="fr text-sm margin-right margin-top-xs text-fw">让残疾人朋友有更强的获得感与幸福感</text>
		</view>
		<view class="text-padding" style="height: 390rpx;margin: 0 4rpx 0 22rpx">
			<view class="grid">
				<view aria-role="button" :aria-label="wit_list[10].name" class="card-menu" @click="naviage(wit_list[10].muri)">
					<image style="width: 343rpx; height: 170rpx;margin:18rpx 20rpx 0 0" :src="wit_list[10].props"></image>
				</view>
				<view aria-role="button" :aria-label="wit_list[11].name" class="card-menu" @click="naviageToPage(wit_list[11].muri)">
					<image style="width: 343rpx; height: 170rpx;margin:18rpx 20rpx 0 0" :src="wit_list[11].props"></image>
				</view>
				<view aria-role="button" :aria-label="wit_list[12].name" class="card-menu" @click="naviageToPage(wit_list[12].muri)">
					<image style="width: 343rpx; height: 170rpx;margin:18rpx 20rpx 0 0" :src="wit_list[12].props"></image>
				</view>
				<view aria-role="button" :aria-label="wit_list[13].name" class="card-menu" @click="naviageToPage(wit_list[13].muri)">
					<image style="width: 343rpx; height: 170rpx;margin:18rpx 20rpx 0 0" :src="wit_list[13].props"></image>
				</view>
			</view>
		</view>
    </view>  
</template>  
<script>  
    import {  
        mapState 
    } from 'vuex';  
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		data(){
			return {
				isScrollShow: 'visible',
				isScrollHidden: 'hidden',
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				isCard:'',
				mis_list: [],
				msg_list: [],
				ads_list: [],
				wit_list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
				top_list: [{},{},{}],
			}
		},
		onShow() {
		},
		onLoad(){
			this.getHomeData();
			this.TowerSwiper('ads_list');
		},
        computed: {
			...mapState(['hasLogin','users']),
			strbar() {
				return this.StatusBar + 45 + 'px';
			},
			itembar() {
				return this.StatusBar + 10 + 'px'
			},
			sebar() {
				// #ifdef MP-WEIXIN || MP-QQ
				return this.Custom.top + 'px';
				// #endif
			}
			
		},
        methods: {
			/** 加载首页数据 **/
			getHomeData(){
				uni.showLoading({title:"加载中"});
				this.$request.getForm('/view/vmui/home').then(
					res => {
						this.mis_list = res.data.mis;
						this.wit_list = res.data.wit;
						this.msg_list = res.data.msg;
						this.ads_list = res.data.ads;
						this.top_list = res.data.top;
						uni.hideLoading();
					}
				);
			},
			/** 广告轮播控制 **/
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					//parseInt（）返回值
					// Math.abs（）返回绝对值
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this[name] = list
			},
			naviageToPage(url) {
				if(this.users.stateId != '1'){
					uni.showModal({
						title: '提示',
						content: '本次操作需要您进行实名登录验证',
						showCancel: true,
						confirmText: '确定',
						success: (e) => {
							if (e.confirm) {
								// #ifdef MP-WEIXIN
								uni.navigateTo({url: '/pages_mine/users/askme'});
								// #endif
								// #ifdef H5
								uni.navigateTo({url: '/pages/admin/login'});
								// #endif
							}
						}
					})
				} else { /* 关爱码  http://115.236.162.166:18081/exthtml/newBusiness/disabledUnion/careCode/index.html */
					if(url.indexOf('https') != -1){
						const newUrl = encodeURIComponent(this.$utils.setLinkUrl(url));
						uni.navigateTo({url: '/pages_serv/apps/wview?url=' + newUrl});
					} else {
						uni.navigateTo({url: url})
					}
				}
			},
			naviage(url){
				if(url.indexOf('https') != -1){
					const newUrl = encodeURIComponent(this.$utils.setLinkUrl(url));
					uni.navigateTo({url: '/pages_serv/apps/wview?url=' + newUrl});
				} else {
					uni.navigateTo({url: url})
				}
			},
			resolvingDate(date) {
				let times = this.$utils.resolvingDate(date);
				return times;
			},
			pageGo(page_uri){
				let str = page_uri.split('?');
				uni.setStorageSync('serviceType', str[1]);
				uni.switchTab({url: page_uri});
			},
			scanCode() { // 扫一扫
				uni.scanCode({
					 success: function (res) {
						const url = res.result || '';
						if(url && url.indexOf('http') != -1){
							const newUrl = encodeURIComponent(url);
							uni.navigateTo({url: '/pages_serv/apps/wview?url=' + newUrl});
						}
					 }
				 });
			}
        },
		/** 页面其他方法 **/
		onPageScroll(ev) {
			if(ev.scrollTop > 100){
				this.isScrollShow = 'hidden';
				this.isScrollHidden = 'visible';
				
			}else{
				this.isScrollShow = 'visible';
				this.isScrollHidden = 'hidden';
			}
		},
		onPullDownRefresh(){
			this.getHomeData();
			setTimeout(() => { uni.stopPullDownRefresh(); }, 200);
		}
    }  
</script>  
<style lang='scss'>
	page {
		background-color: #FFFFFF;
		padding-bottom: 10upx;
	}
	.cu-bar .action:first-child>uni-text[class*="cuIcon-"] {
	    margin-right: 0.3em;
		margin-left: 0px;
	}
	.iconTxt-top {
		z-index: 99;
		color: #FFFFFF;
	}
	.user-section{
		background-image: url(http://wx.hzcl.org.cn/images/aid-apps-mui/sy.png);
		background-size: 100% 100%;
		justify-content: center;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3rpx rgba(0, 0, 0, 0.3);
		padding-bottom: 20rpx;
	}
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 0upx 0upx; 
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			margin-bottom: 20px;
		}
		image {
			width: 70upx;
			height: 70upx;
			margin-bottom: 14upx;
		}
	}
	.cu-list.menu-avatar>.cu-item:after {
		width: 0 !important;
	}
	.action {
		font-weight: bold;
		font-size: larger;
		margin-bottom: 22rpx;
		margin-top: 24rpx;
	}
	.text-padding {
		image {
			width: 332upx;
			height: 140upx;
		}
	}
	.cu-image.lg {
		width: 132upx;
		height: 132upx;
	}
	.cu-card>.cu-item {
	    display: block;
	    background-color: #ffffff;
	    overflow: hidden;
	    border-radius: 5px;
		margin:0 24rpx;
	}
	
	.cu-list.menu-avatar>.cu-item>.cu-avatar {
	    position: absolute;
	    left: 0px;
	}
	.cu-list.menu-avatar>.cu-item .content {
	    position: absolute;
	    left: 110rpx;
	    width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx);
	    line-height: 1.6em;
	}
	.cu-avatar.lg {
	    width: 57px;
	    height: 57px;
	    font-size: 2em;
	}
	.cu-avatar {
	    font-variant: small-caps;
	    margin: 0;
	    padding: 0;
	    display: -webkit-inline-box;
	    display: -webkit-inline-flex;
	    display: inline-flex;
	    text-align: center;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    justify-content: center;
	    vertical-align: middle;
	    font-size: 1.5em;
	}
	
	.top-Fixed{
		position:fixed;
		height: var(--status-bar-height);
		width: 100%; 
		background-color: #E64C14;;
		z-index:999;
	}
	.x-item_img{
		width: 50upx;
		height: 50upx;
	}
	
	.x-item{
		position: relative;
		float: left;
	}
	.height-w {
		height:450upx;
		border: 0px solid transparent;
		border-color: rgba(151, 151, 151, 0.3);
		box-shadow: 0px 4px 4px 1px rgba(128, 124, 142, 0.2);
		margin: 17upx;
		border-radius: 8px;
	}
	.image-w {
		width: 100%;
		height: 230rpx;
		padding: 18rpx;
		border-radius: 70rpx;
	}
	.img-sq {
		width: 365rpx;
		height: 170rpx;
	}
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
		margin: 10px;
	}
	.screen-swiper {
		margin: 14rpx;
		height: 215upx;
	}
	.zq-img {
		width: 220rpx;
		height: 220rpx;
		display: block;
	}
	.text-fw {
		font-weight: 200;
		font-family: fantasy;
	}
	.parting{
		background-color: #F4F5F6;
		height: 20rpx;
		width: 100%;
	}
	.ellipsis{
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.main_color{
		color: #E64C14;
	}
</style>